import React, { Component } from 'react';
import ReactECharts from 'echarts-for-react';

export default class Client extends Component {
  state = {
    show: false,
  };
  getOption = () => {
    var option = {
      title: {
        text: '概况',
        subtext: '钱包收支情况',
        left: 0,
        textStyle: {
          color: '#999',
          fontSize: 20,
        },
        subtextStyle: {
          color: '#000',
          fontSize: 18,
        },
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        // orient: 'vertical',
        bottom: '0',
      },
      series: [
        {
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          data: [
            { value: 43, name: '已结算' },
            { value: 57, name: '未结算' },
          ],
          color: ['#7687e8', '#3a4b67'],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    return option;
  };
  render() {
    return (
      <div className="client">
        <ReactECharts
          style={{ marginTop: '10px', height: '350px', width: '100%' }}
          option={this.getOption()}
        />
      </div>
    );
  }
}
